<template>
  <a-card
    style="height: 100%"
    class="table-design"
    @mouseup="
      () => {
        ;(position.x = null), (position.y = null), (toolPosition.x = null), (toolPosition.y = null)
      }
    "
  >
    <div style="width: 100%">
      <s-switch v-model="lefMenuVisible" :check-value="true" :un-check-value="false"> </s-switch>
      <a-button-group style="float: right; margin-bottom: 10px; height: 50px">
        <s-button
          @click="
            () => {
              $parent.openList()
            }
          "
          ><s-icon type="left-outlined" />返回</s-button
        >

        <s-button @click="autoImport"> <s-icon type="arrow-up-outlined" />模型导入 </s-button>
        <s-button type="primary" @click="saveValue"> <s-icon type="save-outlined" />保存 </s-button>
      </a-button-group>
    </div>
    <div
      v-if="lefMenuVisible"
      class="form-design-side panel-left"
      :style="{
        left: position.left + 'px',
        top: position.top + 'px'
      }"
    >
      <a-card style="width: 100%; height: 100%">
        <template #extra>
          <s-icon type="close-outlined" @click="lefMenuVisible = false" />
        </template>
        <template #title>
          <div style="width: 324px; height: 16px" @mousedown.prevent="onPanelChoose"></div>
        </template>
        <div style="padding: 10px">
          <s-tabs type="card" class="property-content">
            <a-tab-pane key="0" :force-render="true" tab="通用">
              <s-scroll style="width: 100%; height: 500px">
                <s-form-item
                  label="更多"
                  size="custom"
                  :options="{ labelWidth: 6, wrapperWidth: 18, offsetWidth: 0, total: 24 }"
                >
                  <s-switch
                    v-model="config.general.more"
                    :check-value="true"
                    :un-check-value="false"
                  >
                  </s-switch>
                </s-form-item>
              </s-scroll>
            </a-tab-pane>
            <a-tab-pane key="1" :force-render="true" tab="组件">
              <s-scroll style="width: 100%; height: 500px">
                <draggable
                  v-model="components"
                  :group="{ name: 'dragContext', pull: 'clone', put: false }"
                  animation="300"
                  :sort="false"
                  :clone="cloneData"
                  item-key="id"
                  @end="dragEnd"
                >
                  <template #item="{ element }">
                    <component-definition
                      :name="element.label"
                      :icon="element.icon"
                      :template-data="templates[element.value]"
                    />
                  </template>
                </draggable>
              </s-scroll>
            </a-tab-pane>
            <a-tab-pane key="2" :force-render="true" tab="接口">
              <s-scroll style="width: 100%; height: 500px">
                <s-form-item
                  label="自定义接口"
                  size="custom"
                  :options="{ labelWidth: 6, wrapperWidth: 18, offsetWidth: 0, total: 24 }"
                >
                  <s-switch
                    v-model="config.interface.custom"
                    :check-value="true"
                    :un-check-value="false"
                  >
                  </s-switch>
                </s-form-item>
                <s-form-item
                  label="添加"
                  size="custom"
                  :options="{ labelWidth: 6, wrapperWidth: 18, offsetWidth: 0, total: 24 }"
                >
                  <s-input
                    v-model="config.interface.add"
                    :disabled="!config.interface.custom"
                    placeholder="添加接口路径"
                  >
                  </s-input>
                </s-form-item>
                <s-form-item
                  label="删除"
                  size="custom"
                  :options="{ labelWidth: 6, wrapperWidth: 18, offsetWidth: 0, total: 24 }"
                >
                  <s-input
                    v-model="config.interface.delete"
                    :disabled="!config.interface.custom"
                    placeholder="删除接口路径"
                  >
                  </s-input>
                </s-form-item>
                <s-form-item
                  label="批量删除"
                  size="custom"
                  :options="{ labelWidth: 6, wrapperWidth: 18, offsetWidth: 0, total: 24 }"
                >
                  <s-input
                    v-model="config.interface.deleteMulti"
                    :disabled="!config.interface.custom"
                    placeholder="批量删除接口路径"
                  >
                  </s-input>
                </s-form-item>

                <s-form-item
                  label="编辑"
                  size="custom"
                  :options="{ labelWidth: 6, wrapperWidth: 18, offsetWidth: 0, total: 24 }"
                >
                  <s-input
                    v-model="config.interface.update"
                    :disabled="!config.interface.custom"
                    placeholder="编辑接口路径"
                  >
                  </s-input>
                </s-form-item>
                <s-form-item
                  label="列表"
                  size="custom"
                  :options="{ labelWidth: 6, wrapperWidth: 18, offsetWidth: 0, total: 24 }"
                >
                  <s-input
                    v-model="config.interface.list"
                    :disabled="!config.interface.custom"
                    placeholder="列表查询接口路径"
                  >
                  </s-input>
                </s-form-item>
                <s-form-item
                  label="详情"
                  size="custom"
                  :options="{ labelWidth: 6, wrapperWidth: 18, offsetWidth: 0, total: 24 }"
                >
                  <s-input
                    v-model="config.interface.detail"
                    :disabled="!config.interface.custom"
                    placeholder="详情查询接口路径"
                  >
                  </s-input>
                </s-form-item>
              </s-scroll>
            </a-tab-pane>
            <a-tab-pane key="3" :force-render="true" tab="钩子">
              <s-scroll style="width: 100%; height: 500px">
                <s-form-item
                  label="新增"
                  tip="入参:values(表单数据),fullValue(表单全部数据),_this(当前组件)"
                  size="custom"
                  :options="{ labelWidth: 6, wrapperWidth: 18, offsetWidth: 0, total: 24 }"
                >
                  <s-text-area
                    v-model="config.hooks.add"
                    :rows="5"
                    placeholder="在新增前,可以编写一些代码,对数据进行二次修改"
                  >
                  </s-text-area>
                </s-form-item>
                <s-form-item
                  label="修改"
                  tip="入参:values(表单数据),fullValue(表单全部数据),_this(当前组件)"
                  size="custom"
                  :options="{ labelWidth: 6, wrapperWidth: 18, offsetWidth: 0, total: 24 }"
                >
                  <s-text-area
                    v-model="config.hooks.update"
                    :rows="5"
                    placeholder="在编辑前,可以编写一些代码,对数据进行二次修改"
                  >
                  </s-text-area>
                </s-form-item>
                <s-form-item
                  label="查询"
                  tip="入参:query(查询数据),_this(当前组件)"
                  size="custom"
                  :options="{ labelWidth: 6, wrapperWidth: 18, offsetWidth: 0, total: 24 }"
                >
                  <s-text-area
                    v-model="config.hooks.query"
                    :rows="5"
                    placeholder="在查询前,可以编写一些代码,对数据进行二次修改"
                  >
                  </s-text-area>
                </s-form-item>
              </s-scroll>
            </a-tab-pane>
            <a-tab-pane key="4" :force-render="true" tab="数据">
              <s-scroll style="width: 100%; height: 500px">
                <json-viewer
                  v-model="config.mokeData"
                  style="height: 470px"
                  @change="mokeDataChange"
                />
              </s-scroll>
            </a-tab-pane>
          </s-tabs>
        </div>
      </a-card>
    </div>
    <s-list-form :enable-more="config.general.more">
      <template #less>
        <drag-form
          ref="lessDragPanel"
          v-model:items="config.search.less.items"
          drag-group-name="dragContext"
          :drag-class="lefMenuVisible ? 'dragContent' : null"
          :form="lessFormValue"
          :select-id="lessSelectId"
          :logic-control="true"
          @select="lessSelect"
          @remove="removeSelectItem"
        />
      </template>
      <template #more>
        <drag-form
          ref="moreDragPanel"
          v-model:items="config.search.more.items"
          :select-id="moreSelectId"
          drag-group-name="dragContext"
          :drag-class="lefMenuVisible ? 'dragContent' : null"
          :form="moreFormValue"
          :logic-control="true"
          @select="moreSelect"
          @remove="removeSelectItem"
        />
      </template>
    </s-list-form>
    <div>
      <s-tool-bar>
        <template #left>
          <s-button type="primary" icon="plus-outlined">新增</s-button>
          <a-popconfirm title="确认删除所选数据？" ok-text="是" cancel-text="否">
            <s-button type="danger" icon="delete-outlined">删除</s-button>
          </a-popconfirm>
        </template>
        <template #right>
          <s-button type="primary" icon="search-outlined">查询</s-button>
          <s-button
            style="margin-left: 8px"
            icon="stop-outlined"
            @click="
              () => {
                query = {}
              }
            "
            >重置</s-button
          >
        </template>
      </s-tool-bar>
      <s-table ref="table" :scroll="{ y: 450 }" bordered :columns="columns" :value="fakeMokeData">
        <template #bodyCell="{ column }">
          <template v-if="column.key === 'action'">
            <a style="margin-right: 8px"> <s-icon type="eye-outlined" />查看 </a>
            <a style="margin-right: 8px"> <s-icon type="edit-outlined" />编辑 </a>
            <a-popconfirm title="确认删除此条数据？" ok-text="是" cancel-text="否">
              <a style="margin-right: 8px"> <s-icon type="delete-outlined" />删除 </a>
            </a-popconfirm>
          </template>
        </template>
      </s-table>
    </div>
    <div
      v-if="editItem != null"
      class="form-design-side form-design-side-right"
      style="position: absolute; right: 10px; top: 10px; z-index: 999; bottom: 100px"
    >
      <a-card style="width: 100%; height: 100%" title="属性">
        <template #extra>
          <s-icon
            type="close-outlined"
            @click="
              () => {
                lessSelectId = null
                moreSelectId = null
                editItem = null
              }
            "
          />
        </template>
        <div style="height: calc(100% - 70px); padding: 10px">
          <property-panel
            ref="propertyPanel"
            v-model="editItem"
            :on-save="onSave"
            :key-options="keyOptions"
            class="property-panel"
          />
        </div>

        <div class="footer">
          <button
            type="button"
            class="ant-btn ant-btn-primary"
            style="float: right; margin-right: 10px"
            @click="saveProperty"
          >
            <span>应 用</span>
          </button>
        </div>
      </a-card>
    </div>
    <context-menu
      v-model:visible="menuVisible"
      :item-list="[
        { text: '在左侧插入列', key: 'addLeft', icon: 'vertical-right-outlined' },
        { text: '在右侧插入列', key: 'addRight', icon: 'vertical-left-outlined' },
        { text: '编辑', key: 'edit', icon: 'edit-outlined' },
        { text: '删除', key: 'delete', icon: 'delete-outlined' }
      ]"
      :disable-keys="disableKeys"
      @select="menuSelect"
    ></context-menu>
    <table-column-edit ref="tableColumnEdit" :key-options="keyOptions"></table-column-edit>
  </a-card>
</template>

<script>
import TableColumnEdit from './TableColumnEdit.vue'
import JsonViewer from '@/components/JsonViewer/index.vue'
import draggable from 'vuedraggable'
import DragForm from '@/components/extends/dynamicForm/designer/dragForm/index.vue'
import PropertyPanel from '@/components/extends/dynamicForm/designer/properties/PropertyPanel.vue'
import {
  templates,
  components
} from '@/components/extends/dynamicForm/designer/components/templateData.js'
import ContextMenu from '@/components/Menu/ContextMenu.vue'
import ComponentDefinition from '@/components/extends/dynamicForm/designer/components/ComponentDefinition.vue'
import { v4 } from 'uuid'
import renderComponentAttrs from '@/components/extends/dynamicForm/designer/render.js'
export default {
  name: 'QueryList',
  components: {
    JsonViewer,
    draggable,
    ComponentDefinition,
    ContextMenu,
    TableColumnEdit,
    DragForm,
    PropertyPanel
  },
  props: {
    dataId: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      keyOptions: [],
      echos: [],
      menuVisible: false,
      lefMenuVisible: false,
      query: {},
      editItem: null,
      moreSelectId: null,
      lessSelectId: null,
      lessFormValue: {},
      moreFormValue: {},
      position: {
        left: 0,
        top: 50
      },
      fakeMokeData: [],
      toolPosition: {
        left: 10,
        top: 10
      },
      disableKeys: [],
      config: {
        general: {
          more: false
        },
        search: {
          index: 0,
          less: {
            items: []
          },
          more: {
            items: []
          }
        },
        mokeData: [],
        hooks: {
          add: null,
          update: null,
          query: null
        },
        interface: {
          custom: false,
          add: '',
          update: '',
          list: '',
          delete: '',
          deleteMulti: ''
        }
      },
      templates: templates,
      components: components,
      fakeColumns: [],
      columns: []
    }
  },
  created() {
    document.onmousemove = (e) => {
      if (this.position.x && this.position.y) {
        this.position.left = this.position.orgX + e.clientX - this.position.x
        this.position.top = this.position.orgY + e.clientY - this.position.y
      }
      if (this.toolPosition.x && this.toolPosition.y) {
        this.toolPosition.left = this.toolPosition.orgX + e.clientX - this.toolPosition.x
        this.toolPosition.top = this.toolPosition.orgY + e.clientY - this.toolPosition.y
      }
    }
    this.$loading(true)
    this.$api
      .GET('/code/module/selectOneById', {
        id: this.dataId
      })
      .then((res) => {
        this.$loading(false)
        this.moduleValue = res.data.moduleValue
        if (res.data.moduleList) {
          this.loadValue(res.data.moduleList)
        } else {
          if (this.moduleValue && this.moduleValue.code) {
            this.config.interface.check = '/modules/' + this.moduleValue.code + '/permissionList'
            this.config.interface.add = '/modules/' + this.moduleValue.code + '/insert'
            this.config.interface.delete = '/modules/' + this.moduleValue.code + '/delete'
            this.config.interface.deleteMulti = '/modules/' + this.moduleValue.code + '/deleteMulti'
            this.config.interface.update = '/modules/' + this.moduleValue.code + '/update'
            this.config.interface.list = '/modules/' + this.moduleValue.code + '/pageList'
            this.config.interface.detail = '/modules/' + this.moduleValue.code + '/detail'
          }
          this.formatTableColumn()
        }
        if (res.data.moduleValue && res.data.moduleValue.model) {
          this.loadModel()
        }
      })
      .catch(() => {
        this.$loading(false)
        this.formatTableColumn()
      })
  },
  methods: {
    loadModel() {
      this.keyOptions = []
      this.$api.GET('/code/model/selectOneById', { id: this.moduleValue.model }).then((res) => {
        let columns = res.data.modelColumn
        if (columns && columns.length > 0) {
          res.data.modelColumn.forEach((item) => {
            this.keyOptions.push({ label: item.key, value: item.name })
          })
        }
      })
    },
    autoImport() {
      if (this.moduleValue && this.moduleValue.model) {
        this.$loading(true)
        this.$api
          .GET('/code/model/selectOneById', { id: this.moduleValue.model })
          .then((res) => {
            this.$loading(false)
            let columns = res.data.modelColumn
            if (!columns || columns.length == 0) {
              this.$message.warn('模型未配置列，无法导入')
            } else {
              const lessItems = []
              const moreItems = []
              let lessCount = 0
              for (let i = 0; i < columns.length; i++) {
                const val = columns[i]
                if (val.query != '1') {
                  continue
                }
                const item = JSON.parse(JSON.stringify(templates.input))
                item.id = v4()
                item.properties.size = 'list-middle'
                item.properties.label = val.name
                item.properties.key = val.key
                item.properties.placeholder = '请输入' + val.name
                item.properties.max = val.dbLength
                renderComponentAttrs(item)
                if (lessCount < 4) {
                  lessItems.push(item)
                  lessCount = lessCount + 1
                } else {
                  moreItems.push(item)
                }
              }
              this.config.search.less.items = lessItems
              this.config.search.more.items = moreItems
              this.fakeColumns = []
              for (let i = 0; i < columns.length; i++) {
                const val = columns[i]
                if (val.listReturn != '1') {
                  continue
                }
                const item = {
                  dataIndex: val.key,
                  title: val.name,
                  width: 200,
                  echo: false,
                  sorter: val.sort ? true : false,
                  ellipsis: true
                }
                this.fakeColumns.push(item)
              }
              if (res.data.modelForm.operation == '1') {
                this.fakeColumns.push(
                  ...[
                    {
                      title: '创建人',
                      dataIndex: 'createByAccount',
                      ellipsis: true,
                      sorter: false,
                      width: 200
                    },
                    {
                      title: '创建时间',
                      dataIndex: 'createDate',
                      ellipsis: true,
                      sorter: true,
                      width: 200
                    },
                    {
                      title: '修改人',
                      dataIndex: 'updateByAccount',
                      ellipsis: false,
                      sorter: true,
                      width: 200
                    },
                    {
                      title: '修改时间',
                      dataIndex: 'updateDate',
                      ellipsis: true,
                      sorter: true,
                      width: 200
                    }
                  ]
                )
              }
              this.formatTableColumn()
            }
          })
          .catch((e) => {
            this.$loading(false)
            this.$message.warn('导入失败')
          })
      } else {
        this.$message.warn('模型未配置，无法导入')
      }
    },
    mokeDataChange(v) {
      this.fakeMokeData = v && Array.isArray(v) ? v : []
    },
    removeSelectItem() {
      this.lessSelectId
        ? this.$refs.lessDragPanel.removeItemById(this.lessSelectId)
        : this.$refs.moreDragPanel.removeItemById(this.moreSelectId)
      this.lessSelectId = null
      this.moreSelectId = null
      this.editItem = null
    },
    saveProperty() {
      this.$refs.propertyPanel.save()
    },
    validate(item) {
      if (item.properties.key) {
        const finded = this.lessSelectId
          ? this.$refs.lessDragPanel.findItemByKey(item.properties.key)
          : this.$refs.moreDragPanel.findItemByKey(item.properties.key)
        if (finded && finded.properties.key != item.properties.key) {
          return item.properties.key + '已存在'
        }
      }
    },
    updateById(id, val) {
      const item = this.lessSelectId
        ? this.$refs.lessDragPanel.findItemById(id)
        : this.$refs.moreDragPanel.findItemById(id)
      if (item) {
        renderComponentAttrs(val)
        item.children = val.children
        item.type = val.type
        item.attrs = val.attrs
        item.extendAttrs = val.extendAttrs
        item.properties = val.properties
        item.children = val.children
      }
    },
    onSave(val) {
      const msg = this.validate(val)
      if (val.properties.key) {
        if (this.lessSelectId) {
          this.lessFormValue[val.properties.key] = undefined
        } else {
          this.moreFormValue[val.properties.key] = undefined
        }
      }
      if (!msg) {
        const id = val.id
        this.updateById(id, val)
        this.$message.info('成功')
      } else {
        this.$message.info(msg)
      }
    },
    lessSelect(id) {
      this.lessSelectId = null
      this.moreSelectId = null
      this.$nextTick(() => {
        const item = this.$refs.lessDragPanel.findItemById(id)
        if (item) {
          this.editItem = JSON.parse(JSON.stringify(item))
          this.lessSelectId = id
        }
      })
    },
    moreSelect(id) {
      this.lessSelectId = null
      this.moreSelectId = null
      this.$nextTick(() => {
        const item = this.$refs.moreDragPanel.findItemById(id)
        if (item) {
          this.editItem = JSON.parse(JSON.stringify(item))
          this.moreSelectId = id
        }
      })
    },
    dragEnd(e) {
      this.config.search.less.items = this.$refs.lessDragPanel.getData(null, (that) => {
        return false
      })
      this.config.search.more.items = this.$refs.moreDragPanel.getData(null, (that) => {
        return false
      })
    },
    menuSelect(key) {
      const dataIndex = this.operationKey
      let index = this.findIndexByDataIndex(dataIndex)
      switch (key) {
        case 'addLeft':
          if (index == -1 && !dataIndex) {
            index = this.fakeColumns.length
          }
          this.$refs.tableColumnEdit.open({ ellipsis: false }, (values) => {
            if (this.findIndexByDataIndex(values.dataIndex) >= 0) {
              this.$message.warn(values.dataIndex + '已存在')
              return false
            }
            this.fakeColumns.splice(index, 0, values)
            this.formatTableColumn()
            return true
          })
          break
        case 'addRight':
          this.$refs.tableColumnEdit.open({ sorter: false, ellipsis: false }, (values) => {
            if (this.findIndexByDataIndex(values.dataIndex) >= 0) {
              this.$message.warn(values.dataIndex + '已存在')
              return false
            }
            this.fakeColumns.splice(index + 1, 0, values)
            this.formatTableColumn()
            return true
          })
          break
        case 'edit':
          this.$refs.tableColumnEdit.open(this.fakeColumns[index], (values) => {
            let index2 = this.findIndexByDataIndex(values.dataIndex)
            if (index2 >= 0 && index2 != index) {
              this.$message.warn(values.dataIndex + '已存在')
              return false
            }
            this.fakeColumns.splice(index, 1, values)
            this.formatTableColumn()
            return true
          })
          break
        case 'delete':
          this.fakeColumns.splice(index, 1)
          this.formatTableColumn()
          break
      }
    },
    onPanelChoose(e) {
      this.position.orgX = this.position.left
      this.position.orgY = this.position.top
      this.position.x = e.clientX
      this.position.y = e.clientY
    },
    onToolPanelChoose(e) {
      this.toolPosition.orgX = this.toolPosition.left
      this.toolPosition.orgY = this.toolPosition.top
      this.toolPosition.x = e.clientX
      this.toolPosition.y = e.clientY
    },
    renderItem(item) {
      Object.keys(item).forEach((key) => {
        const value = item[key]
        if (value) {
          if (Array.isArray(value)) {
            value.forEach((v) => {
              this.renderItem(v)
            })
          } else if (typeof value == 'string') {
            item[key] = value.replace('{i}', this.config.search.index + '')
          } else if (Object.prototype.toString.call(value) === '[object Object]') {
            this.renderItem(value)
          }
        }
      })
    },
    cloneData(a) {
      const item = JSON.parse(JSON.stringify(templates[a.value]))
      item.id = v4()
      this.renderItem(item)
      renderComponentAttrs(item)
      this.config.search.index = this.config.search.index + 1
      return item
    },
    onColumnOrderChange() {
      if (this.startDataIndex && this.endDataIndex) {
        let index1 = this.findIndexByDataIndex(this.startDataIndex)
        let item = this.fakeColumns.splice(index1, 1)
        let index2 = this.findIndexByDataIndex(this.endDataIndex)
        this.fakeColumns.splice(index2, 0, item[0])
        this.formatTableColumn()
      }
    },
    findIndexByDataIndex(dataIndex) {
      for (let index in this.fakeColumns) {
        let item = this.fakeColumns[index]
        if (dataIndex == item.dataIndex) {
          return index
        }
      }
      return -1
    },
    getTableColumnHtml() {
      let newColumn = []
      this.fakeColumns.forEach((item) => {
        let newItem = {
          dataIndex: item.echo ? item.dataIndex + 'Name' : item.dataIndex,
          title: item.title,
          width: item.width,
          sorter: item.sorter,
          ellipsis: item.ellipsis
        }
        newColumn.push(newItem)
      })
      newColumn.push({
        title: '操作',
        fixed: 'right',
        key: 'action',
        width: 300
      })
      return JSON.stringify(newColumn).replace(/"/g, "'")
    },
    formatTableColumn() {
      let newColumn = []
      let echos = []
      this.fakeColumns.forEach((item) => {
        let newItem = {
          dataIndex: item.echo ? item.dataIndex + 'Name' : item.dataIndex,
          orgDataIndex: item.dataIndex,
          title: item.title,
          width: item.width,
          customHeaderCell: this.customHeaderCell,
          sorter: item.sorter,
          ellipsis: item.ellipsis
        }
        if (item.echo) {
          echos.push({
            name: item.dataIndex,
            label: item.echoLabel,
            value: item.echoValue,
            url: item.echoUrl
          })
        }
        newColumn.push(newItem)
      })
      newColumn.push({
        title: '操作',
        fixed: 'right',
        key: 'action',
        customHeaderCell: this.customHeaderCell,
        width: 300
      })
      this.echos = echos
      this.columns = newColumn
      if (this.$refs.table) {
        this.$refs.table.$forceUpdate()
      }
    },
    loadValue(data) {
      this.config = data.config
      this.fakeMokeData =
        this.config.mokeData && Array.isArray(this.config.mokeData) ? this.config.mokeData : []
      this.fakeColumns = data.tableColumns
      this.formatTableColumn()
    },
    saveValue() {
      const data = {
        config: JSON.parse(JSON.stringify(this.config)),
        tableColumns: this.fakeColumns,
        html: {
          less: this.$refs.lessDragPanel.buildHtml(
            false,
            '          ',
            (that) => {
              return false
            },
            'query'
          ),
          more: this.$refs.moreDragPanel.buildHtml(
            false,
            '          ',
            (that) => {
              return false
            },
            'query'
          ),
          echos: JSON.stringify(this.echos).replace(/"/g, "'"),
          columns: this.getTableColumnHtml()
        }
      }
      data.config.search.less.items = this.$refs.lessDragPanel.getData(null, (that) => {
        return false
      })
      data.config.search.more.items = this.$refs.moreDragPanel.getData(null, (that) => {
        return false
      })
      this.$loading(true)
      this.$api
        .PUT('/code/module/updateList', {
          id: this.dataId,
          form: data
        })
        .then((res) => {
          this.$loading(false)
          this.$message.info(res.msg)
        })
        .catch(() => {
          this.$loading(false)
        })
    },
    customHeaderCell(column) {
      return {
        style: {
          cursor: 'pointer'
        },
        onDblclick: (event) => {},
        onContextmenu: (event) => {
          this.operationKey = column.orgDataIndex
          if (!this.operationKey) {
            this.disableKeys = ['addRight', 'delete', 'edit']
          } else {
            this.disableKeys = []
          }
          event.preventDefault()
          this.menuVisible = true
        },
        onMouseleave: (event) => {},
        onMouseenter: (event) => {
          // 兼容IE
          var ev = event || window.event
          if (ev.target.nodeName == 'TH' && column.dataIndex) {
            ev.target.draggable = true
          }
        },
        // 开始拖拽
        onDragstart: (event) => {
          this.startDataIndex = column.dataIndex
          this.endDataIndex = undefined
          // 兼容IE
          var ev = event || window.event
          // 阻止冒泡
          ev.stopPropagation()
        },
        // 拖动元素经过的元素
        onDragover: (event) => {
          this.endDataIndex = column.dataIndex
          // 兼容 IE
          var ev = event || window.event
          // 阻止默认行为
          ev.preventDefault()
        },
        // 鼠标松开
        onDrop: (event) => {
          // 兼容IE
          var ev = event || window.event
          // 阻止冒泡
          ev.stopPropagation()
          ev.target.draggable = false

          this.onColumnOrderChange()
        }
      }
    }
  }
}
</script>

<style lang="less" scoped>
.form-design-side {
  width: 300px;
  font-size: 12px;
}
.panel-left {
  width: 350px;
  position: absolute;
  z-index: 999;
  left: 12px;
  top: 12px;
}
.table-design:deep(.form-design-item-checked) {
  border-radius: 3px;
  background-color: #81d3f8;
}
.table-design:deep(.dragContent) {
  box-shadow: inset 0 1px #f0f0f0, inset 0 -1px #f0f0f0, inset -1px 0 #f0f0f0, inset 1px 0 #f0f0f0;
}
.form-design-side:deep(.ant-card-head-title) {
  padding: 8px 10px;
  font-size: 14px;
}

.form-design-side:deep(.ant-card-head) {
  padding: 0 5px;
  min-height: 20px;
}
.form-design-side:deep(.ant-card-extra) {
  padding: 0px 0;
}

.form-design-side:deep(.ant-card-body) {
  padding: 0px;
  min-height: 20px;
  height: calc(100% - 38px);
}
.form-design-side:deep(span.ant-divider-inner-text) {
  font-size: 10px;
  color: #13c2c2;
}
.property-panel:deep(.ant-tabs-content) {
  height: 100%;
  width: 100%;
}
.property-panel:deep(.ant-tabs-content-holder) {
  height: 100%;
  width: 100%;
  flex-basis: 0;
}
.property-panel:deep(.property-content) {
  height: 100%;
  width: 100%;
}
</style>
